import { defineConfig } from 'vite'
import { resolve } from 'path'
import { viteMockServe } from 'vite-plugin-mock'

import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

/**
 * [Vite配置说明](https://vitejs.dev/config/)
 * [按需引入配置说明](https://www.npmjs.com/package/unplugin-vue-components)
 * [mack配置](https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md)
 * [px转为视口单位](https://github.com/evrone/postcss-px-to-viewport)
 */
export default defineConfig({
	plugins: [
		vue(),
		Components(),
		viteMockServe({
			mockPath: './mocks', // mock文件地址
			watchFiles: true, // 监视mockPath对应的文件夹内文件中的更改
			logger: false, // 是否在控制台显示请求日志
			supportTs: false, // 打开后，可以读取ts文件模块。打开后将无法监视.js文件
			localEnabled: true, // 开发是否启用 mock 功能
			prodEnabled: false, // 打包是否启用 mock 功能
		}),
	],
	resolve: {
		alias: {
			'@': resolve(__dirname, 'src'),
			'~': resolve(__dirname, './'),
		},
	},
	css: {
		preprocessorOptions: {
			less: {
				// 将当前路径的全局样式文件全局注入到所有项目中
				additionalData: '@import "@/styles/index.less";',
			},
		},
		postcss: {
			// 配置 PostCSS，将自动应用于所有已导入的CSS（建立postcss.config.js额外文件配置也可）
			plugins: [
				postcssPxToViewport({
					viewportWidth: 750, //  设计稿的视口宽度
					unitPrecision: 5, // 单位转换后保留的精度
					propList: ['*'], // 能转化为vw的属性列表
					viewportUnit: 'vw', //  希望使用的视口单位
					fontViewportUnit: 'vw', // 字体使用的视口单位
					selectorBlackList: [], // 需要忽略的CSS选择器
					minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
					mediaQuery: true, // 媒体查询里的单位是否需要转换单位
					replace: true, // 是否直接更换属性值，而不添加备用属性
					exclude: /node_modules/, // 忽略某些文件夹下的文件或特定文件，多文件忽略[/xxx/]
					include: /src/, // 如果设置了include，那将只有匹配到的文件才会被转换
					landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
					landscapeUnit: 'vw', // 横屏时使用的单位
					landscapeWidth: 568, // 横屏时使用的视口宽度
				}),
			],
		},
	},
	// // 开发环境下启动服务配置
	server: {
		host: '127.0.0.1',
		port: 3000,
		open: true,
		server: {},
	},
	// 生产环境下的打包配置
	build: {
		terserOptions: {
			compress: {
				// 缩小文件配置，去除文件中的console.*、debugger
				drop_console: true,
				drop_debugger: true,
			},
		},
	},
})
